<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import tool from '@/utils/tool'

const columnsDist = inject('columnsDist')
const fileVisible=ref(false)
const formFileRef=ref(null)
const formFileData=ref({
  type:'',
  fileList:[],

})
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
//   open: false,
  // 弹出层标题（用户导入）
  title: "",
  fileList:[],
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + tool.getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_URL + "/system/uploadFile"
});
// 上传数据
const rulesFile = {
      type: [{ required: true, message:'请选择上传类型',validateTrigger: 'blur'}, ],
      fileList: [{ required: true, message:'请上传文件',validateTrigger: 'blur'}, ],
  }
  const onShow = async (value) => {
    formFileData.value.fileList=[]
    formFileData.value.type=''
    fileVisible.value = true
  }
const emits = defineEmits(['addFile'])
  //新增 
  const submitForm =async (formEl) => {
    if (!formEl) return
      await formEl.validate((valid) => {
        if (!valid) {
              emits('addFile',formFileData.value);
              close()         
        }
      }) 
      
    };
    
    const close = () => {
      fileVisible.value = false
    }
defineExpose({ onShow })
</script>

<template>
      <a-modal v-model:visible="fileVisible" title="上传附件" v-if="fileVisible">
        <a-form ref="formFileRef" :rules="rulesFile" :model="formFileData" auto-label-width >
              <a-form-item field="type" label="上传类型" validate-trigger="change">
                <a-select v-model="formFileData.type" :options="columnsDist.dictObj.data.AttachmentType" :field-names="{ value: 'key', label: 'title' }"
                placeholder="请选择上传类型" allow-clear allow-search :virtual-list-props="{height:200}" /> 
              </a-form-item>
              <a-form-item field="fileList" label="文件" validate-trigger="change">
                <a-upload style="margin-top: 10px;" v-model:file-list="formFileData.fileList" :action="upload.url" multiple :limit="5" :headers="upload.headers" />
              </a-form-item>
         </a-form>
         <template #footer>        
          <a-button @click="close">关闭</a-button>
          <a-button type="primary" @click="submitForm(formFileRef)">
            确定
          </a-button>
        </template>
    </a-modal>

</template>
<style>
   .form-top-main{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }
   .tab-main{
    display: flex;
    align-items: center;
    margin: 10px 0;
   }
   .tab-main .arco-form-item{
    margin-bottom: 0;
   }
   .tab-main .arco-switch{
    margin-right: 20px;
   }
   .expandableList{
    display: flex;
    margin-right: 20px;
    width: 200px;
    align-items: center;
   }
</style>